import { ref } from 'vue';

import { getSearchDevices, getSearchSources } from '@/api/page/manage_account';
import { FormProps, FormSchema } from '@/components/Table';
import { BasicColumn } from '@/components/Table/src/types/table';

export const getBasicColumns: BasicColumn[] = [
  {
    title: '客户名称',
    dataIndex: 'memberName',
  },
  {
    title: '手机',
    dataIndex: 'phone',
  },
  {
    title: '购买型号',
    dataIndex: 'device',
  },
  {
    title: '售后工程师',
    dataIndex: 'afterSalesEngineer',
  },
  {
    title: '线索来源',
    dataIndex: 'source',
  },
  {
    title: '服务记录',
    dataIndex: 'serviceRecord',
  },
  {
    title: '新客户',
    dataIndex: 'serviceRecordType',
  },
  {
    title: '会员',
    dataIndex: 'type',
  },
  {
    title: '是否退货',
    dataIndex: 'returnOfGoods',
  },
  {
    title: '退货原因',
    dataIndex: 'returnReason',
  },
  {
    title: '购买时间',
    dataIndex: 'date',
  },
  {
    title: '微信',
    dataIndex: 'wechat',
  },
  {
    title: '邮箱',
    dataIndex: 'mail',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '服务类型',
    dataIndex: 'serviceType',
  },
  {
    title: '会员类型',
    dataIndex: 'customerType',
  },
  {
    title: '操作人',
    dataIndex: 'operator',
  },
  {
    title: 'ID',
    dataIndex: 'id',
  },
];

export const schemas: FormSchema[] = [
  {
    field: `memberName`,
    label: `客户名称`,
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
  {
    field: `afterSalesEngineer`,
    label: `售后工程师`,
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
  {
    field: `device`,
    label: `设备名称`,
    component: 'Select',
    colProps: {
      span: 6,
    },
  },
  {
    field: `source`,
    label: `线索来源`,
    component: 'Select',
    colProps: {
      span: 6,
    },
    componentProps: {},
  },
  {
    field: `serviceType`,
    component: 'Select',
    label: '服务类型',
    colProps: {
      span: 6,
    },
    componentProps: {
      options: [
        { label: '上门服务', value: '上门服务', key: '上门服务' },
        { label: '视频服务', value: '视频服务', key: '视频服务' },
      ],
    },
  },
  {
    field: `address`,
    label: `地址`,
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
  {
    field: `type`,
    label: `会员`,
    component: 'Select',
    colProps: {
      span: 6,
    },
    componentProps: {
      options: [
        { label: '红', value: 2, key: 2 },
        { label: '黄', value: 1, key: 1 },
        { label: '绿', value: 0, key: 0 },
        { label: '白', value: -1, key: -1 },
        { label: '黑', value: -2, key: -2 },
      ],
    },
  },
  {
    field: `returnOfGoods`,
    label: `是否退货`,
    component: 'Select',
    colProps: {
      span: 6,
    },
    componentProps: {
      options: [
        { label: '是', value: 0, key: 0 },
        { label: '否', value: 1, key: 1 },
      ],
    },
  },
  {
    field: `deviceModel`,
    label: `设备型号`,
    component: 'Select',
    colProps: {
      span: 6,
    },
  },
];

export const listDevices = ref<any[]>([]);
export const sourceOption = ref<any[]>([]);
export const deviceOption = ref<any[]>([]);
export const deviceModelOption = ref<any[]>([]);
// getSearchDevices({}).then((res) => {});
// getSearchSources({}).then((res) => {});
export async function getFormConfig() {
  const resDevices = await getSearchDevices({});
  if (resDevices.code === 1000) {
    listDevices.value.splice(0, listDevices.value.length);
    deviceOption.value.splice(0, deviceOption.value.length);
    deviceModelOption.value.splice(0, deviceModelOption.value.length);
    listDevices.value = resDevices.obj;
    const temp = [];

    listDevices.value.forEach((item) => {
      if (!temp.includes(item.deviceName)) {
        deviceOption.value.push({
          label: item.deviceName,
          value: item.deviceName,
          key: item.deviceName,
        });
        temp.push(item.deviceName);
      }

      deviceModelOption.value.push({
        label: item.deviceModel,
        value: item.deviceModel,
        key: item.deviceModel,
        device: item.deviceName,
      });
    });
    console.log('deviceOption.value', deviceOption.value);
    // deviceOption.value = [
    //   ,
    // ];
    // deviceOption.value.splice(
    //   0,
    //   deviceOption.value.length,
    //   ...deviceOption.value.filter((item, index) => {
    //     return deviceOption.value.findIndex((obj) => obj.label === item.label) === index;
    //   }),
    // );
    const target: any = schemas.find((item) => item.field === 'deviceModel');
    target.componentProps = {
      options: deviceModelOption,
    };

    const targetDevice: any = schemas.find((item) => item.field === 'device');
    targetDevice['componentProps'] = ({ formActionType }) => {
      return {
        options: deviceOption.value,
        onChange: (e: any) => {
          let selectDeviceModelOption: any[] = [];
          selectDeviceModelOption = deviceModelOption.value.filter((item) => {
            return item.device === e;
          });
          formActionType.setFieldsValue({
            deviceModel: '',
          });
          formActionType.updateSchema([
            {
              field: 'deviceModel',
              componentProps: {
                options: selectDeviceModelOption,
              },
            },
          ]);
        },
      };
    };
  }
  const resSources = await getSearchSources({});
  if (resSources.code === 1000) {
    sourceOption.value.splice(0, sourceOption.value.length);
    let options = <any>[];
    resSources.obj.forEach((item) => {
      options.push({
        label: item.sourcesName,
        value: item.sourcesName,
        key: item.sourcesName,
      });
    });
    options = [...new Set(options)];
    options = options.filter((item, index) => {
      return options.findIndex((obj) => obj.label === item.label) === index;
    });
    const target: any = schemas.find((item) => item.field === 'source');
    target.componentProps = {
      options,
    };
    sourceOption.value = options;
  }
  // return {
  //   labelWidth: 100,
  //   autoAdvancedLine: 4,
  //   schemas,
  // };
  return schemas;
}
